<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>袁晴龙的后台管理系统</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        #app {
            width: 100vw;
            height: 100vh;
        }

        #app .nav {
            display: flex;
            justify-content: space-between;
            align-items: center;

            padding: 0 50px;
            height: 10vh;
        }

        #app .nav .user_info span {
            margin-right: 25px;
        }

        #app .box {
            display: flex;
        }

        #app .box .menu {
            width: 15vw;
            height: 88vh;
            background-color: #545c64;
        }

        #app .box .web {
            width: 85vw;
            height: 88vh;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="nav">
            <h2>袁晴龙的后台管理系统</h2>
            <div class="user_info">
                <span>{{userInfo.userName}}</span>
                <el-button @click="logOut" type="info" icon="el-icon-warning">退出登录</el-button>
            </div>
        </div>
        <div class="box">
            <div class="menu">
                <el-menu default-active="1" @select="openPage" class="el-menu-vertical-demo"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <el-menu-item index="1">
                        <i class="el-icon-menu"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title">课程管理</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-document"></i>
                        <span slot="title">学生管理</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-setting"></i>
                        <span slot="title">班级管理</span>
                    </el-menu-item>
                </el-menu>
            </div>

            <div class="web">
                <iframe :src="htmlPath" width="100%" height="100%"></iframe>
            </div>
        </div>
    </div>
</body>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="./js/axiosUtil.js"></script>
<script src="./js/yqlUtil.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                userInfo: {
                    userName: 'adminadmin'
                },
                htmlPath: "user.html"
            }
        },
        methods: {
            logOut(){
                axiosGet("/logOut").then(resp => {
                    this.$message({
                        message: resp.data.msg,
                        type: 'warning'
                    });
                    setTimeout(() => {
                        location.href = 'login.html'
                    }, 250);
                }).catch(error => {
                    this.$message({
                        message: error.data.msg,
                        type: 'warning'
                    });
                })
            },
            openPage(index) {
                if (index == 1) {
                    this.htmlPath = 'user.html'
                }else if (index == 2) {
                    this.htmlPath = 'course.html'
                }else if (index == 3) {
                    this.htmlPath = 'student.html'
                }else if (index == 4) {
                    this.htmlPath = 'class.html'
                }
            }
        },
        mounted() {
        }
    })
</script>

</html>
